<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试原生js发送Ajax请求</title>
    </head>
    <body>
        <h2>该页面是测试使用原生js发送ajax请求</h2>
        <button id="btn">点我, 发送GET请求</button>
        <div id="div"></div>
        
        <script type="text/javascript">
            /**
             * 1. 实例化一个XMLHttpRequest请求
             * 2. 给该对象绑定一个事件监听, 名称为: onreadystatechange
             * 3. 指定发送请求的: 方式, 地址, 参数
             * 4. 发送请求
             */ 
            document.getElementById("btn").onclick = function(){
                // 1. 实例化一个XMLHttpRequest请求
                let xhr = new XMLHttpRequest()
                // 2. 给该对象绑定一个事件监听, 名称为: onreadystatechange
                xhr.onreadystatechange = function(){
                    /**
                     * 在xhr内部有5种状态
                     *      0 - 当xhr被实例化出来, 状态就是0, 即:初始化状态
                     *      1 - 请求还没有发出去, 即: send 方法还没有被调用, 依然可以修改请求头
                     *      2 - 请求已经发出去了, 即: send 方法已经被调用, 不能再修改请求头, 响应首行和响应行已经回来了
                     *      3 - 数据回来了(但是数据可能不完整, 如果数据小, 会在此阶段直接接收完毕, 数据大有待于进一步接收)
                     *      4 - 数据完全回来了
                     */ 
                    // if(xhr.readyState == 0){
                    //     console.log("我出生了, 我是初始化状态")
                    // }

                    if(xhr.readyState == 1){
                        xhr.setRequestHeader("demo", "123")
                        console.log("请求还没有发出去, 依然可以修改请求头")
                    }

                    if(xhr.readyState == 2){
                        console.log("请求已经发出去了")
                        let demo = xhr.getResponseHeader("date")
                        console.log(demo)
                    }

                    if(xhr.readyState == 3){
                        console.log("数据已经回来了, data =" + xhr.response) 
                    }

                    if(xhr.readyState == 4 && xhr.status === 200){
                        document.getElementById("div").innerHTML = xhr.response
                    }
                }
                // 3. 指定发送请求的: 方式, 地址, 参数
                xhr.open("GET", "http://localhost:3000/test_get?name=kobi&age=18")
                // 4. 发送请求
                xhr.send()
            }
        </script>
    </body>
</html>